<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>🍽️ 点餐系统</title>
    <link rel="stylesheet" href="lib/element-ui.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div id="app">
        <!-- 顶部导航 -->
        <div class="header">
            <div class="header-title">🍽️ 点餐系统</div>
            <div class="header-subtitle">亲爱的，你想吃什么？</div>
        </div>

        <!-- 主内容区 -->
        <div class="main-container">
            <!-- 分类侧边栏 -->
            <div class="category-sidebar" :class="{ 'hidden': !showCategories }">
                <div class="category-list">
                    <div v-for="category in categories" :key="category.id" class="category-item"
                        :class="{ 'active': selectedCategory === category.id }" @click="selectCategory(category)">
                        {{ category.name }}
                    </div>
                </div>
            </div>

            <!-- 餐品展示区 -->
            <div class="product-area">
                <!-- 分类切换按钮 -->
                <div class="category-toggle" @click="toggleCategories">
                    <i class="el-icon-menu"></i>
                    {{ currentCategoryName || '选择分类' }}
                </div>

                <!-- 修改product-card部分 -->
                <div class="product-grid">
                    <div v-for="product in filteredProducts" :key="product.id" class="product-card"
                        @click="addToCart(product)">
                        <div class="product-image">
                            <!-- 总是尝试显示图片，使用getImageUrl方法处理路径 -->
                            <img :src="getImageUrl(product.imageUrl)" :alt="product.name" @error="handleImageError"
                                @load="handleImageLoad">
                            <!-- 占位符默认隐藏，只在图片加载失败时显示 -->
                            <div class="product-image-placeholder" style="display: none;">
                                🍽️
                            </div>
                        </div>
                        <div class="product-info">
                            <div class="product-name">{{ product.name }}</div>
                            <div class="product-description">{{ product.description || '美味餐品' }}</div>
                        </div>
                        <div class="product-action">
                            <i class="el-icon-plus"></i>
                        </div>
                    </div>
                </div>

                <!-- 空状态 -->
                <div v-if="filteredProducts.length === 0" class="empty-state">
                    <div class="empty-icon">🍽️</div>
                    <div class="empty-text">该分类下暂无餐品</div>
                </div>
            </div>
        </div>

        <!-- 购物车底部栏 -->
        <div class="cart-footer" v-if="cartItems.length > 0">
            <div class="cart-info">
                <div class="cart-count">已选 {{ totalQuantity }} 件</div>
                <div class="cart-items">{{ cartItemNames }}</div>
            </div>
            <button class="checkout-btn" @click="goToCheckout">
                去下单
                <span class="cart-badge">{{ totalQuantity }}</span>
            </button>
        </div>

        <!-- 购物车为空时的提示 -->
        <div class="floating-cart" v-else @click="showCart = true">
            <i class="el-icon-shopping-cart-2"></i>
        </div>
    </div>

    <!-- 引入JS文件 -->
    <script src="lib/vue.js"></script>
    <script src="lib/element-ui.js"></script>
    <script src="lib/axios.js"></script>
    <script src="js/api.js"></script>
    <script src="js/app.js"></script>
</body>

</html>